Welcome
Welcome to Chess Diagram Maker. This online tool lets you easily create advanced diagrams for use in your documentation. It's free. No advertising.
News
The completely restyled Chess Diagram Maker is being launched.
It has a new look with some minor functional improvements. The new layout is better suited for future extensions.
A new feature is added to save your diagram in the cloud by uploading it anonymously to the image sharing site
imgur.com
Imgur is the best place to share and enjoy the most awesome images on the Internet.
A new version is released where local storage is used to store upload links and to store board settings.
The next time you visit the diagram maker it restores the board of the last session.
A new feature is implemented to store diagrams (max 10) for reuse at a later moment.
A new feature will be implemented to create simple animations of changing positions. You can save the animations as animated gifs.
A new feature is implemented to drag pieces of the board from one square to another.
Existing functionality to add or remove pieces is unchanged.
A new tool is launched to draw shapes like lines, rectangles or circles on top of the diagram.
The table with background patterns for dark squares is extended.
Seven new light patterns are added.
Preferences.
Your browser does not support HTML5 local storage.
No preferences.
Your browser supports local storage. It will be used to make the application more comfortable.
If button switched to OFF, storage will be cleared.
Setup pieces
Choose your favorite piece.
The kind of piece you will put on the board.
The piece format; SVG for better resolution but not supported by all browsers. And not available for all pieces.
Setup colors
Choose your favorite color pattern in the button box below. The first two rows are fixed color patterns. The last three rows are variable color patterns depending on the choice of the fixed color pattern.
Board properties
Setup position
Setup the position by clicking on squares or by entering a FEN string in the input field below.
Initial position:
Empty position:
Textlines at top and bottom of the board.
Save board as image.
Although not supported by all browsers, two methods are available to make an image of the generated board.
Upload board as image.
Save your diagram in the cloud by uploading it anonymously to the image sharing site
imgur.com
Again, this feature is not supported by all browsers.
No upload request
Link to the uploaded image is:
no link
Stored links to recently uploaded images (max 8)
Store diagrams.
Store max 10 diagrams on local storage for reuse at a later moment.
Enter a name in the list below and the current diagram will be saved.
This feature is disabled. The reason can be that your browser does not support local storage or you disable the use of local storage.
Create Animation.
Create an animation of changing positions.
The result is an animated image which can be downloaded as usual.
Record mouse actions :
Generate animation:
Draw shapes.
You can illustrate your diagram with shapes.
The shapes can be drawn with the mouse by clicking and dragging.
The basic forms to draw are line, rectangle, ellipse, polygon and free form.
Undo last shape:
Clear all shapes:
=============================================
Use the left mouse button to draw shapes.
To start the drawing of a shape, push the left mouse button down.
Then drag the mouse pointer to form the shape.
If you release the left mouse button, the shape is finished.
For a polygon the drawing is a bit different.
Start the drawing of a polygon by a pushing the left mouse button down and up.
The first point of the polygon is now defined.
Drag the mouse pointer to locate the next point of the polygon.
Push the mouse button down and up to define the second point. Repeat this process for the other points of the polygon.
The drawing is finished after the mousepointer is near the first point or if 8 sides are drawn.
The shapes are not resized if you resize the board. So before drawing first set the preferred size of the board.
HELP
A list of adjustable properties.
You can change the position in two ways.
Two buttons facilitates the setup of the initial position and the empty position.
Although not supported by all browsers, two methods are available to make an image of the generated board.
A commonly used extension for images is jpg but here you had to use the well known extension png.
The size of the board on the screen defines the resolution of the saved image. Choose a large size for a high resolution.
The image resolution varies from low (356x356, 11 kB) to high (996x996, 86 kB).
For sharp piece images we advice to use the format SVG instead of PNG. But not all browsers are capable of creating images for the piece format SVG.
Important!
Unfortunately, at this moment not all browsers support one of these methods. Browsers that currently support one of the methods are:
Firefox, Chrome, Opera, Safari, Android browser, Chrome for Android.
So temporary it seems not possible to make images with Internet Explorer.
Piece images are read from files with two available formats: SVG and PNG. The SVG format is a modern format with the property that images keep its sharpness independent of the size they were displayed.
You can choose which format to use (default PNG).
For sharp piece images we advice to use the format SVG. But not all browsers are capable of creating images for the piece format SVG. And at this moment the SVG format is not available for all pieces. You can try it and see if it works. Otherwise keep the piece format PNG.
Local storage aka. Web storage are methods and protocols used for storing data in a web browser.
It supports persistent data storage, similar to cookies.
Web storage is being standardized by the World Wide Web Consortium (W3C).
It is supported by most modern browsers.
The diagram maker uses web storage to store:
1. Upload links if you upload the board as image to imgur.com
2. Board properties like colors, piece type and position. If you use the diagram maker a next time it restores the last used properties.
3. Diagrams for reuse at a later moment (max 10).
4. Settings of the last generated animation.
5. A list of user defined shapes.
If you like you can disable the use of local storage with the switch in the section Preferences.
In the section "Create Animation" you can create an animated GIF or PNG of changing positions.
Each animation is defined by three main properties:
- the initial position.
- the delay of a frame (milliseconds).
- the transition of one frame to the other.
To create an animation, follow the next steps.
1. Choose an initial position.
2. Press the button Start to open the recording phase.
During the recording phase, all mouse actions at the board are stored as transitions of the position.
3. Change the current position with your mouse by clicking and dragging pieces.
A counter is displayed to show the number of stored mouse actions.
4. Press the GO button to generate an animation. Wait a moment before the animation is created and displayed.
At each moment during the recording phase you can generate an animation.
Once the recording phase is stopped by pressing the Stop button, no new mouse actions can be added.
The delay of one frame of the animation can be set by a sliderbar.
During the recording phase the delay of transitions can be changed.
A title is displayed at the start of the animation. You can change the title in a text field.
A new line is created with the separator ++.
If you let the text field empty, no title is displayed.
Use the checkbox to select the extension of the animation file: GIF or PNG.
GIF is an old format and is widely supported.
Sometimes PNG animations are prefered over GIF animations.
By a special design the PNG animations has a much smaller filesize.
To make something clear, you can illustrate your diagram with shapes.
The shapes can be drawn with the mouse by clicking and dragging.
Use the left mouse button to draw shapes. The shapes are put on top of the diagram.
Choose one of the basic forms to draw: line, rectangle, ellipse, polygon or free form.
The shapes are not resized if you resize the board.
So before drawing, first set the preferred size of the board.
The shapes are stored in local storage. If the diagram maker is started, stored shapes are reloaded and drawn.
For more usage tips see the section of the drawing tool.
The Chess Diagram Maker is a personal project, setup and maintained as a leisure activity.
I hope it will be useful and you enjoy it.
The work is copyrighted. Please ask for permission to use parts of my work.
The diagram maker should work well for modern browsers. Maybe it does not work well always because browsers work differently. Browsers are constantly evolving so you can expect if it does not work well now, it works well in the future.
The diagram program uses the programming language Javascript. Your browser must be enabled to use Javascript.
Comments or questions?
Please send a mail to: Arthur Kalverboer
Thanks to Peter Wong for giving permission to use his set of chess piece icons (virtual pieces B16..B22). See his beautiful icons and graphics about chess at virtualpieces.net.
As many thanks go to Maurizio Monge for using his creative set of chess piece icons (B11,B12,B13,B39). You can admire his chess art at Maurizio Monge's homepage.
Piece set B31 is a slightly modified set of Yuri Mazursky
licensed under CC BY 2.5.
The creation of animated gif is supported by the jsgif library of Kevin Kwok.
Copyright (c) 2010-2014 Kevin Kwok.
Email: antimatter15@gmail.com
Web hosting by the Dutch association Open Domein.
You can download a generated diagram as image under the condition that it belongs to the public domain, anyone can freely make copies of it, distribute it, use it for commercial purposes or sell it to others.
The term public domain refers to creative materials that are not protected by intellectual property laws such as copyright, trademark, or patent laws. The public owns these works, not an individual author or artist. Anyone can use a public domain work without obtaining permission, but no one can ever own it.